<template>
  <div class="assertion">
    <el-form :model="form" label-width="auto">
      <el-form-item label="断言名称">
        <el-input v-model="form.name" class="!w-500px" placeholder="请输入断言名称"/>
      </el-form-item>
      <el-form-item label="断言对象">
        <el-select v-model="form.target" placeholder="" class="!w-500px">
          <el-option label="Response Text" value="Response Text" />
          <el-option label="Response JSON" value="Response JSON" />
          <!-- <el-option label="Response XML" value="Response XML" /> -->
          <el-option label="Response Header" value="Response Header" />
          <!-- <el-option label="Response Cookie" value="Response Cookie" />
          <el-option label="环境变量" value="环境变量" />
          <el-option label="全局变量" value="全局变量" />
          <el-option label="临时变量" value="临时变量" />
          <el-option label="耗时" value="耗时" /> -->
        </el-select>
      </el-form-item>
      <el-form-item :label="labelObj[form.target][0]" v-if="!['Response Text','耗时'].includes(form.target)">
        <el-input v-model="form.expression" class="!w-500px" :placeholder="labelObj[form.target][1]"/>
      </el-form-item>
      <el-form-item label="断言">
        <el-select v-model="form.equal" placeholder="" class="!w-240px">
          <el-option label="等于" value="等于" />
          <!-- <el-option label="不等于" value="不等于" /> -->
          <!-- <el-option label="存在" value="存在" /> -->
          <!-- <el-option label="不存在" value="不存在" /> -->
          <el-option label="小于" value="小于" />
          <!-- <el-option label="小于或等于" value="小于或等于" /> -->
          <el-option label="大于" value="大于" />
          <!-- <el-option label="大于或等于" value="大于或等于" /> -->
          <el-option label="包含" value="包含" />
          <el-option label="不包含" value="不包含" />
        </el-select>
        <el-input v-model="form.value" class="!w-260px"/>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
const form = reactive({
  name: '',
  target: 'Response Text',
  equal: '等于',
  expression:'',
  value:''
})
const labelObj = ref({
  'Response JSON':['JSONPath表达式','如：$.store.book[0].title'],
  'Response XML':['XPath表达式',''],
  'Response Header':['Header名','Header Name'],
  'Response Cookie':['Cookie名',''],
  '环境变量':['变量名',''],
  '全局变量':['变量名',''],
  '临时变量':['变量名','']
})
</script>

<style scoped>
.assertion{
  display: flex;
  justify-content: center;
}
</style>
